@charset "utf-8";

@import '../../theme.scss';

.at-calendar {
  background: var(--x-bg-color-lighter);

  .x-app-header__inner {
    z-index: 6;
    background-color: var(--x-bg-color-lighter);
  }

  .x-app-header__addon-bottom {
    padding: 0;
    position: relative;
    z-index: 7;

    .time-range {
      position: relative;
      z-index: 3;
      display: flex;
      height: px(180);

      &::after {
        content: '';
        display: block;
        width: px(6);
        height: 80%;
        background: none;
        position: absolute;
        left: 50%;
        bottom: 0;
        box-shadow: 0 0 px(30) rgba(#477a7f, 0.4);
      }

      &::before {
        content: '';
        display: block;
        position: absolute;
        width: px(60);
        height: 100%;
        background: var(--x-bg-color-lighter);
        bottom: 0;
        z-index: 3;
      }

      .point {
        position: absolute;
        width: px(20);
        height: px(20);
        z-index: 5;
        background: var(--x-bg-color-lighter);
        bottom: 0;
        display: none;
        transform: translate(px(-10), px(8)) rotate(45deg);
      }

      &.choose-from {
        .point {
          display: block;
          left: 25%;
        }

        &::before {
          right: 50%;
        }

        &::after {
          transform: translateX(px(-5)) rotate(-2deg);
        }

        .date.from {
          box-shadow: px(-10) px(20) px(40) rgba(#477a7f, 0.1);

          h6,
          p {
            color: var(--x-primary-color);
          }
        }
      }

      &.choose-to {
        .point {
          display: block;
          left: 75%;
        }

        &::before {
          left: 50%;
        }

        &::after {
          transform: translateX(px(5)) rotate(2deg);
        }

        .date.to {
          box-shadow: px(10) px(20) px(40) rgba(#477a7f, 0.1);

          h6,
          p {
            color: var(--x-primary-color);
          }
        }
      }

      &.choose-finished {
        &::before,
        &::after {
          display: none;
        }
      }

      .date {
        padding: px(10) px(40);
        color: var(--x-text-color);
        width: 100%;
        flex: 1;
        position: relative;
        z-index: 5;

        &.active {
          color: var(--x-primary-color);

          > p {
            color: var(--x-primary-color);
          }
        }

        h6 {
          color: inherit;
          font-size: px(36);
          margin-bottom: px(15);
        }

        p {
          font-size: px(30);
        }

        &.to {
          h6,
          p {
            text-align: right;
          }
        }
      }
    }

    .weeks {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 0 px(40);
      height: px(66);
      font-size: px(24);
      background: var(--x-bg-color);

      li {
        height: px(66);
        line-height: px(66);
        color: var(--x-text-color);
      }

      .active {
        position: relative;

        &::after {
          content: '';
          display: block;
          width: px(8);
          height: px(8);
          background-color: var(--x-primary-color);
          position: absolute;
          left: 50%;
          bottom: px(5);
          margin-left: px(-4);
          border-radius: 50%;
        }
      }
    }
  }

  .clear {
    color: var(--x-text-color-o60);

    &.disabled {
      opacity: 0.3;
    }
  }

  .month {
    .month-title {
      font-size: px(36);
      font-weight: 400;
      line-height: px(40);
      margin-bottom: px(70);
    }

    > .list {
      display: flex;
      flex-wrap: wrap;
    }

    .month-day {
      width: 14.285%; // 7分之1
      margin-bottom: px(60);
      position: relative;

      &.disabled {
        p {
          em {
            color: var(--x-text-color-o40);
            background: none;
          }
        }

        span {
          visibility: hidden;
        }
      }

      &.disabled-all {
        p {
          em {
            color: var(--x-text-color-o40);
            background: none;
          }

          &::before {
            content: '';
            position: absolute;
            left: 15%;
            top: 50%;
            width: 70%;
            height: px(1);
            background-color: var(--x-text-color-o30);
            transform: translate(0, -50%) rotate(45deg);
          }
        }

        span {
          visibility: hidden;
        }
      }

      &.disabled-part {
        p em {
          background: url('../date-part.png');
          background-size: 100% 100%;
        }
      }

      .choose-tips {
        position: absolute;
        left: 50%;
        top: -90px;
        transform: translateX(-50%);
        z-index: 999;
        height: 72px;
        background-color: #eefcf7;
        border: 1px solid #b7f2dd;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: var(--x-primary-color);
        border-radius: 36px;
        padding: 0 26px;
        white-space: nowrap;

        &::before {
          content: '';
          display: block;
          width: 14px;
          height: 14px;
          background-color: #eefcf7;
          position: absolute;
          bottom: -1px;
          left: 50%;
          transform: translate(-50%, 50%) rotate(45deg);
          border-right: 1px solid #b7f2dd;
          border-bottom: 1px solid #b7f2dd;
        }
      }

      p {
        padding: 0 px(15);
        display: block;
        position: relative;
        overflow: hidden;
        margin-bottom: px(20);

        &::after {
          content: '';
          display: block;
          margin-top: 100%;
        }
      }

      em {
        position: absolute;
        background: var(--x-calendar-day-bg-color);
        background-size: 100%;
        left: px(15);
        top: 0;
        right: px(15);
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-style: normal;
        font-size: px(26);
        color: var(--x-text-color);
        z-index: 2;
        border-radius: 50%;
      }

      .badge {
        position: absolute;
        right: px(12);
        top: 0;
        z-index: 2;
        font-style: normal;
        font-size: px(18);
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--x-bg-color-lighter);
        border-radius: 50%;
        color: var(--x-text-color-o70);
        width: px(30);
        height: px(30);
        overflow: hidden;
        line-height: 1;
        border: px(1) solid var(--x-border-color);
      }

      span {
        font-size: px(20);
        color: var(--x-text-color-o30);
        display: block;
        text-align: center;
        text-indent: -0.5em;
        height: px(20);
        line-height: px(20);
      }

      &.active p {
        em {
          color: #fff;
          background: none;
        }

        &::before {
          content: '';
          display: block;
          position: absolute;
          left: px(-1);
          right: px(-1);
          top: 0;
          bottom: 0;
          background: var(--x-primary-color);
          transform: translate(0, 0) rotate(0);
          height: 100%;
          width: auto;
        }
      }

      &.empty + .active,
      &.active:first-child,
      &.active.mon,
      &.active-first {
        p::before {
          left: 50%;
        }

        em {
          background: var(--x-primary-color) !important;
          border-radius: 50%;
          color: #fff;
        }
      }

      &.active-first.disabled-all:not(.active) p::before {
        display: none;
      }

      &.active:last-child,
      &.active.sun,
      &.active-end {
        p::before {
          right: 50%;
        }

        em {
          background: var(--x-primary-color) !important;
          border-radius: 50%;
          color: #fff;
        }
      }

      &.active-first em::before,
      &.active-end em::before {
        display: block;
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        border-radius: 50%;
        border: px(4) solid rgba(0, 0, 0, 0.4);
        border-top-color: transparent;
        border-right-color: transparent;
        transform: rotate(45deg);
      }

      &.active-end em::before {
        transform: rotate(-135deg);
      }

      &.active-first.active-end {
        em::before {
          border: px(4) solid rgba(0, 0, 0, 0.4);
          transform: rotate(0);
        }
      }

      &.is-holiday span {
        color: var(--x-danger-color);
      }
    }
  }

  .footer {
    min-height: 0;

    .tips {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: px(20) px(40);

      > p {
        display: flex;
        align-items: center;
        font-size: px(24);
        color: var(--x-text-color-o60);
        height: px(24);
        line-height: px(24);
        margin-left: px(40);

        i {
          width: px(30);
          height: px(30);
          margin-right: px(10);
          display: block;
          background: #ddd; // todo: color
          border-radius: 50%;

          &.part {
            background: url('../icon-date-part.png'); // todo: color
            background-size: 100% 100%;
          }
        }
      }
    }

    .bottom {
      display: flex;
      align-items: center;
      padding: px(20) px(40);
      border-top: px(1) solid var(--x-time-picker-border-color);

      > .footer-tips {
        display: block;
        flex: 1;
      }

      > .def-tips-txt {
        display: block;
        flex: 1;
        font-size: px(28);
        color: rgb(60, 60, 90);

        strong {
          font-size: px(34);
          padding-left: px(10);
        }
      }

      > .submit {
        width: px(240);
        flex: none;
      }
    }
  }
}

.at-calendar__time-picker {
  .x-popup__inner {
    overflow: hidden;
  }

  .header {
    display: flex;
    height: px(100);
    align-items: center;
    justify-content: space-between;
    padding: 0 px(30);

    a {
      font-size: px(26);

      &.cancel {
        color: rgb(138, 138, 156); // rgb(60, 60, 90) x 0.6alpha
      }
    }
  }

  .x-time-picker {
    padding-left: px(200);
    padding-right: px(200);
    overflow: visible;
  }

  .x-time-picker__day-list {
    display: none;
  }

  .x-time-picker__tips {
    margin-top: -20px;
  }
}
